// 这是main.js 是我们项目的JS入口文件

// 1.导入 jquery
// import *** from *** 是 ES6中导入模块的方式
// 由于 ES6 的代码，太高级了，浏览器解析不了，所以，这一行会报错
import $ from 'jquery'
// const $ = require('jquery') 

// 使用import语法，导入css样式表
import './css/index.css' 
import './css/index.less' 
import './css/index.scss' 

// 使用 import 语法，导入 CSS样式表
//  注意：webpach，默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件;
//  如果要处理 非JS类型的文件，我们需要手动安装一些 合适的 第三方 loader 加载器
//  1.如果想要打包处理css文件，需要安装 npm i style-loader css-loader -D
//  2.打开 webpack.config.js 这个配置文件，在里面，新增一个配置节点，叫做module,它是一个对象，在这个module对象身上，
//  有个 rules 属性，这个rules属性是个数组，这个数组中，存放了，所有第三方文件的匹配和处理规则
//  
//  注意：webpach 处理第三方文件类型的过程
//  1.发现这个 要处理的文件不是js文件，然后就去配置文件中，查找有没有对应的第三方 loader规则
//  2.如果能找到对应的规则，就会调用对应的loader处理，这种文件类型
//  3.在调用loader的时候，是从后往前调用的
//  4.当最后的一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到bundle.js中去
  

$(function(){
	$('li:odd').css('backgroundColor', 'yellow')
	$('li:even').css('backgroundColor', function(){
		return '#' + 'D97634'
	})
}) 

// 经过刚才的演示，webpack可以做什么事情？？？
// 1.webpack能够处理JS文件的互相依赖关系
// 2.webpack能够处理js的兼容问题，把高级的、浏览器不能识别的语法，转为低级的，浏览器能正常识别的语法
// 刚才运行的命令格式：webpack 	要打包的文件的路径	打包好的输出文件的路径 	

// 使用 webpack-dev-server这个工具，来实现自动打包编译的功能
// 1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
// 2.安装完毕后，这个 工具的用法，和webpack命令的用法，完全一样
// 3.由于，我们是在项目中，本地安装的 webpack-dev-server, 所以，无法把它当作脚本命令，在powershell 终端中直接运行；
// (只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行)
// 4.注意：webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须按照webpack
// 5.webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上，而是，直接托管到了
// 电脑的内存中，所以，我们在项目根目录中个，根本找不到这个打包好的bundle.js;
// 6.我们可以认为，webpack-dev-server把打包好的我就，以一种虚拟的形式，托管到了咱们项目的根目录中，
// 虽然我们看不到它，但是，可以认为，和dist src node_modules 平级，有一个看不见的文件，叫做bundle.js